import Layout from '@/Layout';
import { Card } from 'antd';
import React, { useState } from 'react';
import Overview from './Overview';
import Summarize from './Summarize';

const tabList = [
  {
    key: 'overview',
    tab: '总览',
  },
  {
    key: 'summarize',
    tab: '按文章归纳',
  },
];
const contentList: Record<string, React.ReactNode> = {
  overview: <Overview />,
  summarize: <Summarize />,
};

const Comments: React.FC = () => {
  const [activeTabKey, setactiveTabKey] = useState<string>('overview');

  const onTab1Change = (key: string) => {
    setactiveTabKey(key);
  };

  return (
    <Layout>
      <Card
        style={{ marginTop: '20px' }}
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={onTab1Change}
      >
        {contentList[activeTabKey]}
      </Card>
    </Layout>
  );
};

export default Comments;
